<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item>电影院管理员</a-breadcrumb-item>
    <a-breadcrumb-item>影厅管理</a-breadcrumb-item>
  </a-breadcrumb>
  <h2>欢迎，{{page.list && page.list[0].cnm_id}}号影院的管理员！</h2>
  <!-- 查询条件 -->
  <a-form style="margin-bottom: 5px" layout="inline" :model="query">
    <a-form-item>
      <a-input v-model:value="query.cnm_hall_id" style="width: 160px">
        <template #prefix>影厅ID：</template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input v-model:value="query.cnm_hall_capacity" style="width: 160px">
        <template #prefix>容量：</template>
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-button @click="getPage(1)" type="primary">
        <template #icon><SearchOutlined /></template>
        查询
      </a-button>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="openAdd">新增</a-button>
    </a-form-item>
  </a-form>

  <a-table
    :columns="columns"
    :dataSource="page.list"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <!-- 操作按钮 -->
    <template #opr="{ record }">
      <a-button type="link" @click="openUpd(record)">修改</a-button>
      <a-divider type="vertical" />
      <a-button type="link" @click="execDel(record)">删除</a-button>
    </template>
  </a-table>

  <!-- 新增页面 -->
  <a-modal v-model:visible="visible" title="新增影厅" @ok="execAdd">
    <a-form
      :model="addObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="影院ID">
        <a-input v-model:value="addObj.cnm_id" disabled />
      </a-form-item>
      <a-form-item label="影厅ID">
        <a-input v-model:value="addObj.cnm_hall_id" />
      </a-form-item>
      <a-form-item label="容量">
        <a-input v-model:value="addObj.cnm_hall_capacity" />
      </a-form-item>
      <a-form-item label="行">
        <a-input v-model:value="addObj.row_num" />
      </a-form-item>
      <a-form-item label="列">
        <a-input v-model:value="addObj.column_num" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }"> </a-form-item>
    </a-form>
  </a-modal>
  <!-- 修改 -->
  <a-modal v-model:visible="visible2" title="修改信息" @ok="execUpd">
    <a-form
      :model="updObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="影院ID">
        <a-input v-model:value="updObj.cnm_id" disabled/>
      </a-form-item>
      <a-form-item label="容量">
        <a-input v-model:value="updObj.cnm_hall_capacity" />
      </a-form-item>
      <a-form-item label="行">
        <a-input v-model:value="updObj.row_num" />
      </a-form-item>
      <a-form-item label="列">
        <a-input v-model:value="updObj.column_num" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }"> </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from "vue";
import { get, post, put, del, tip } from "@/common";
const columns = [
  {
    title: "影厅ID",
    dataIndex: "cnm_hall_id",
  },
  {
    title: "容量",
    dataIndex: "cnm_hall_capacity",
  },
  {
    title: "行",
    dataIndex: "row_num",
  },
  {
    title: "列",
    dataIndex: "column_num",
  },
  {
    title: "操作",
    key: "opr",
    slots: {
      customRender: "opr", //定义插槽，and bugs all caused by your careless
    },
  },
];
//分页处理-start
const query = reactive({});

const page = ref({}); //接收服务端返回的分页对象

//分页引擎
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pages: 5, //总页数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,共" +
      pagination.pages +
      "页,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get("/c_admin/hall", query).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    //pagination.current = page.value.current;
    //pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;
    pagination.pages = Math.ceil(page.value.total / pagination.pageSize);
  });
};
getPage(1); //页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;

  pagination.pages = Math.ceil(pagi.total / pagination.pageSize);

  getPage(pagination.current);
};

//分页处理-end

//以下为新增影院相关定义
const addObj = reactive({
  cnm_hall_id:"",
  cnm_id: "", 
  cnm_hall_capacity: "",
  row_num: "",
  column_num:"",
});
const visible = ref(false);
const openAdd = () => {
 addObj.cnm_id=page.value.list[0].cnm_id;
  visible.value = true;
};
const execAdd = () => {
  post("/c_admin/hall", addObj).then((res) => {
    addObj.cnm_hall_id="";
    addObj.cnm_id = "";
    addObj.cnm_hall_capacity = "";
    addObj.row_num = "";
    addObj.column_num="";
    visible.value = false;
    tip.success("新增成功");
    getPage(page.value.last + 1);
  });
};


const updObj = reactive({
  cnm_hall_id:"",
  cnm_id:"",
  cnm_hall_capacity: "",
  row_num: "",
  column_num: "",
});
const visible2 = ref(false);
const openUpd = (cnm) => {
  updObj.cnm_hall_id=cnm.cnm_hall_id;
  updObj.cnm_id=cnm.cnm_id;
  updObj.cnm_hall_capacity = cnm.cnm_hall_capacity;
  updObj.row_num = cnm.row_num;
  updObj.column_num = cnm.column_num;
  visible2.value = true;
};
const execUpd = () => {
  put("/c_admin/hall", updObj).then((res) => {
    updObj.cnm_hall_id="";
    updObj.cnm_id = "";
    updObj.cnm_hall_capacity = "";
    updObj.row_num = "";
    updObj.column_num="";
    visible2.value = false;
    tip.success("修改成功");
    getPage(page.value.current);
  });
};

const execDel = (record) => {
  del("/c_admin/hall/",record).then((res) => {
    tip.success("删除成功");
    getPage(page.value.current);
  });
};
</script>